<template>
  <div
    class="classBox"
    :class="[item.active ? 'active' : '']"
    :title="item.className"
    @click="click"
    @contextmenu.prevent="contextmenu(item)"
  >
    <button class="css-button css-button-neumorphic">
      <div>{{ item.className }}</div>
      <div v-if="item.UserNum && userInfo.userType === '666'">({{ item.UserNum }})</div>
    </button>
  </div>
</template>

<script>

export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userInfo: this.$ls.get('USER_INFO') || {}
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    click() {
      this.$emit('clickClass')
    },
    contextmenu() {
      this.$emit('contextmenu')
      console.log('类别右击 this.item', this.item)
      this.item.active = true
    }
  }
}
</script>

<style lang="scss" scoped>
.classBox{
  margin: 10px 0 10px 14px;
}
.active{
  .css-button{
    background-color: #80ed99;
  }
}
.css-button-neumorphic {
  width: 100%;
  height: 50px;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #efefef;
  box-shadow: 2px 2px 4px #c8d0e7, -1px -1px 3px #fff;
  color: #585858;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.css-button-neumorphic:active {
  box-shadow: inset 1px 1px 3px #c8d0e7, inset -1px -1px 3px #fff;
}
</style>
